<template>
  <view class="main u-p-t-20">
    <view class="device-list-title u-p-l-24 u-p-r-24 u-flex-row u-row-between u-font-26 u-m-b-20"
          @click="showDeviceListClick()" v-if="merchantStoreIdList.length == 1">
      <text class="">设备选择</text>
      <view class="u-flex-row u-row-end u-font-26">
        <text>{{$u.test.isEmpty(checkDeviceNo) ? '选单个设备单独设置':checkDeviceNo}}</text>
        <u-icon name="arrow-right" color="rgba(0, 0, 0, 0.5)" size="16"></u-icon>
      </view>
    </view>

    <view v-if="exhibitCurrencyExchangeMachine"  style="background-color: #FFFFFF;border-top-left-radius:30rpx;border-top-right-radius:30rpx;padding-top: 20rpx;">
      <view style="text-align: center">兑币机</view>
      <view class="ad-level u-p-l-24 u-p-r-24 u-p-t-28 u-p-b-28">
        <view class="ad-level-title u-flex-row u-row-start ">
          <view class="title-icon"></view>
          <view class="title u-font-32 u-m-l-10">头部广告</view>
          <view class="title-tips u-font-24 u-m-l-9" @click="topDemoShowPopup = true">查看样式规范</view>
        </view>
        <view class="ad-level-tips u-font-24 u-m-t-10">提示：分辨率最低要求：1080*530，最多2张</view>

        <view class="ad-level-list u-flex-row u-row-flex-start u-m-t-24 u-p-t-12 u-p-b-12">
          <view class="ad-level-list-item u-flex-row">
            <u-upload
                :fileList="topBannerFileUrlList"
                @afterRead="bannerAfterRead"
                @delete="bannerDeletePicToFTP"
                name="1"
                multiple
                :maxCount="2"
                width="276"
                height="302"
                :maxSize="3 * 1024 * 1024"
                @oversize="bannerOversize"
                @clickPreview="fullScreenBannerPreview"
            >
              <image :src="`${baseStaticFileUrl}/image/brand/wait-upload.svg`"
                     mode="widthFix" style="width: 276rpx;height: 302rpx; margin-left: 44rpx;"></image>
            </u-upload>
          </view>
        </view>
      </view>

      <view class="ad-level u-p-l-24 u-p-r-24 u-p-t-28 u-p-b-28 u-m-t-20">
        <view class="ad-level-title u-flex-row u-row-start ">
          <view class="title-icon"></view>
          <view class="title u-font-32 u-m-l-10">全屏广告</view>
          <view class="title-tips u-font-24 u-m-l-9" @click="fullScreenDemoShowPopup = true">查看样式规范</view>
        </view>
        <view class="ad-level-tips u-font-24 u-m-t-10">提示：分辨率最低要求：1080*1920，最多2张</view>
        <view class="ad-level-list u-flex-row u-row-flex-start u-m-t-24 u-p-t-12 u-p-b-12">
          <view class="ad-level-list-item u-flex-row">
            <u-upload
                :fileList="fullScreenBannerFileUrlList"
                @afterRead="bannerAfterRead"
                @delete="bannerDeletePicToFTP"
                name="2"
                multiple
                :maxCount="2"
                width="276"
                height="302"
                :maxSize="3 * 1024 * 1024"
                @oversize="bannerOversize"
                @clickPreview="fullScreenBannerPreview"
            >
              <image :src="`${baseStaticFileUrl}/image/brand/wait-upload.svg`"
                     mode="widthFix" style="width: 276rpx;height: 302rpx; margin-left: 44rpx;"></image>
            </u-upload>
          </view>
        </view>
      </view>
    </view>
    <view v-if="whetherToDisplayVendingMachine && $u.test.isEmpty(checkDeviceNo)" style="background-color: #FFFFFF;border-top-left-radius:30rpx;border-top-right-radius:30rpx;padding-top: 20rpx;margin-top: 20rpx">
      <view style="text-align: center">售货机</view>
      <view class="ad-level u-p-l-24 u-p-r-24 u-p-t-28 u-p-b-28 u-m-t-20">
        <view class="ad-level-title u-flex-row u-row-start ">
          <view class="title-icon"></view>
          <view class="title u-font-32 u-m-l-10">商品广告图</view>
          <view class="title-tips u-font-24 u-m-l-9" @click="fullScreenDemoShowPopup = true">查看样式规范</view>
        </view>
        <view class="ad-level-tips u-font-24 u-m-t-10">提示：最多1张</view>
        <view class="ad-level-list u-flex-row u-row-flex-start u-m-t-24 u-p-t-12 u-p-b-12">
          <view class="ad-level-list-item u-flex-row">
            <u-upload
                :fileList="vendingMachineMerchandiseFileUrlList"
                @afterRead="bannerAfterRead"
                @delete="bannerDeletePicToFTP"
                name="3"
                multiple
                :maxCount="1"
                width="276"
                height="302"
                :maxSize="3 * 1024 * 1024"
                @oversize="bannerOversize"
                @clickPreview="fullScreenBannerPreview"
            >
              <image :src="`${baseStaticFileUrl}/image/brand/wait-upload.svg`"
                     mode="widthFix" style="width: 276rpx;height: 302rpx; margin-left: 44rpx;"></image>
            </u-upload>
          </view>
        </view>
      </view>

      <view class="ad-level u-p-l-24 u-p-r-24 u-p-t-28 u-p-b-28 u-m-t-20">
        <view class="ad-level-title u-flex-row u-row-start ">
          <view class="title-icon"></view>
          <view class="title u-font-32 u-m-l-10">首页广告</view>
          <view class="title-tips u-font-24 u-m-l-9" @click="fullScreenDemoShowPopup = true">查看样式规范</view>
        </view>
        <view class="ad-level-tips u-font-24 u-m-t-10">提示：最多1张</view>
        <view class="ad-level-list u-flex-row u-row-flex-start u-m-t-24 u-p-t-12 u-p-b-12">
          <view class="ad-level-list-item u-flex-row">
            <u-upload
                :fileList="vendingMachineFrontPageFileUrlList"
                @afterRead="bannerAfterRead"
                @delete="bannerDeletePicToFTP"
                name="4"
                multiple
                :maxCount="1"
                width="276"
                height="302"
                :maxSize="3 * 1024 * 1024"
                @oversize="bannerOversize"
                @clickPreview="fullScreenBannerPreview"
            >
              <image :src="`${baseStaticFileUrl}/image/brand/wait-upload.svg`"
                     mode="widthFix" style="width: 276rpx;height: 302rpx; margin-left: 44rpx;"></image>
            </u-upload>
          </view>
        </view>
      </view>
      <view class="ad-level u-p-l-24 u-p-r-24 u-p-t-28 u-p-b-28">
        <view class="ad-level-title u-flex-row u-row-start ">
          <view class="title-icon"></view>
          <view class="title u-font-32 u-m-l-10">顶部轮播图</view>
          <view class="title-tips u-font-24 u-m-l-9" @click="topDemoShowPopup = true">查看样式规范</view>
        </view>
        <view class="ad-level-tips u-font-24 u-m-t-10">提示：分辨率最低要求：1080*530，最多4张</view>

        <view class="ad-level-list u-flex-row u-row-flex-start u-m-t-24 u-p-t-12 u-p-b-12 slideshow">
          <view class="ad-level-list-item u-flex-row" style="flex-wrap: wrap;height: 650rpx;">
            <u-upload
                :fileList="vendingMachineTopCarouselFileUrlList"
                @afterRead="bannerAfterRead"
                @delete="bannerDeletePicToFTP"
                name="5"
                multiple
                :maxCount="4"
                width="276"
                height="302"
                :maxSize="3 * 1024 * 1024"
                @oversize="bannerOversize"
                @clickPreview="fullScreenBannerPreview"
            >
              <image :src="`${baseStaticFileUrl}/image/brand/wait-upload.svg`"
                     mode="widthFix" style="width: 276rpx;height: 302rpx; margin-left: 44rpx;"></image>
            </u-upload>
          </view>
        </view>
      </view>
    </view>

    <u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" :border="false">
      <view class="bottom-box">
        <u-button text="保存并更新" :customStyle="saveBtnCustomStyle" @click="save()"></u-button>
      </view>
    </u-tabbar>


    <u-popup :show="deviceListShow" mode="top"  @close="deviceListPopupClose()" :customStyle="deviceListPopupCustomStyle">
      <view>
        <view class="device-list-title u-p-l-24 u-p-r-24 u-flex-row u-row-between u-font-26 u-m-t-20">
          <text class="">设备选择</text>
          <view class="u-flex-row u-row-end">
            <text>设备端优先展示独立设置的广告</text>
          </view>
        </view>
        <scroll-view :style="{ maxHeight: '612rpx',minHeight: '500rpx',background: '#f6f6f6' }" scroll-y="true" @scrolltolower="reachBottom">
          <view class="device-list">
            <view class="device-item u-font-28 u-row-between u-p-l-26 u-p-r-26 u-flex-row" v-for="(item, index) of deviceList" :key="index">

              <view class="device-item-l u-flex-row">
                <view class="u-m-r-19">
                  <u-radio-group
                      v-model="checkDeviceId"
                      placement="column"
                  >
                    <u-radio
                        :label="`${deviceTypeEnum.SUPER_MONEY_CHANGER === item.deviceTypeId ? '超级兑币机':
                                  deviceTypeEnum.VENDING_MACHINE === item.deviceTypeId ? '无屏售货机':
                                  deviceTypeEnum.OPEN_DOOR_VENDING_MACHINE === item.deviceTypeId ? '开门式售货机':
                                  deviceTypeEnum.BLEND_VENDING_MACHINE === item.deviceTypeId ? '混合售货机':''}${item.deviceNo}${$u.test.isEmpty(item.remarkName) ? '' : '（' + item.remarkName + '）'}`"
                        :name="item.id"
                        @change="deviceRadioChange($event, item.deviceNo)"
                    >
                    </u-radio>
                  </u-radio-group>
                </view>
              </view>
              <view class="device-item-r u-flex-row">
                <text v-if="!$u.test.isEmpty(item.merchantStoreId)">已设置</text>
                <text v-else class="device-item-r-t">未设置</text>
              </view>
            </view>
            <u-empty
                v-if="deviceList.length == 0"
                text="暂无设备"
                mode="list"
                icon="http://cdn.uviewui.com/uview/empty/list.png"
            />
          </view>
        </scroll-view>
        <view class="set-up-ad-box">
          <u-button text="统一设置广告" :customStyle="setUpYourAdStyle" @click="setUpYourAd()"></u-button>
        </view>
      </view>
    </u-popup>

    <u-popup :show="topDemoShowPopup" mode="center" @close="topDemoShowPopupClose">
      <u--image :showLoading="true" :src="`${baseStaticFileUrl}/image/brand/top-demo.png`" width="720rpx"
                height="428rpx"></u--image>
    </u-popup>

    <u-popup :show="fullScreenDemoShowPopup" mode="center" @close="fullScreenDemoShowPopupClose">
      <u--image :showLoading="true" :src="`${baseStaticFileUrl}/image/brand/full-screen-demo.png`" width="720rpx"
                height="926rpx"></u--image>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      baseStaticFileUrl: this.$configPath.staticFileUrl,
      baseImgURL: this.$configPath.imgURL,
      setUpYourAdStyle: {
        zIndex: '99',
        width: '500rpx',
        height: '77rpx',
        background: 'rgb(69, 111, 255)',
        borderRadius: '120px',
        color: '#fff',
      },
      saveBtnCustomStyle: {
        zIndex: '99',
        width: '700rpx',
        height: '88rpx',
        background: 'rgb(69, 111, 255)',
        borderRadius: '120px',
        color: '#fff',
      },
      deviceTypeEnum: this.$deviceTypeEnum,
      // 1：单个设置，2：批量设置
      type: null,
      merchantStoreId: null,
      merchantStoreIdList: [],
      deviceList: [],
      deviceListShow: false,

      deviceListPopupCustomStyle: {
        height: '300rpx',
      },

      checkedAll: false,
      deviceIdList: [],

      //兑币机头部图片文件列表  上传用的
      topBannerFileList: [],
      //兑币机头部广告 前端显示用的
      topBannerFileUrlList: [],
      //兑币机后端查询到得头部广告集合
      merchantTopBannerList: [],

      //兑币机全屏图片文件列表   上传用的
      fullScreenBannerFileList: [],
      //兑币机全屏广告 前端显示用的
      fullScreenBannerFileUrlList: [],
      //兑币机后端查询到的全屏广告集合
      merchantFullScreenBannerList: [],

      //售货机商品广告图文件列表   上传用的
      vendingMachineMerchandiseFileList:[],
      //售货机商品广告图 前端显示用的
      vendingMachineMerchandiseFileUrlList: [],
      //售货机后端查询到的商品广告图
      merchantVendingMachineMerchandiseList: [],

      //售货机用户端首页广告图文件列表   上传用的
      vendingMachineFrontPageFileList:[],
      //售货机用户端首页广告图 前端显示用的
      vendingMachineFrontPageFileUrlList: [],
      //售货机后端查询到的用户端首页广告图
      merchantVendingMachineFrontPageList: [],

      //售货机头部图片文件列表   上传用的
      vendingMachineTopCarouselFileList:[],
      //售货机头部广告图 前端显示用的
      vendingMachineTopCarouselFileUrlList: [],
      //售货机后端查询到的头部轮播图
      merchantVendingMachineTopCarouselList: [],
      checkDeviceId: null,
      checkDeviceNo: null,
      //是否展示售货机广告上传
      whetherToDisplayVendingMachine:false,
      //是否展示兑币机广告上传
      exhibitCurrencyExchangeMachine:false,
      topDemoShowPopup: false,
      fullScreenDemoShowPopup: false,
    }
  },
  onLoad(options){
    this.type = options.type;
    if (options.type == 1){
      this.merchantStoreId = options.merchantStoreId;
      this.merchantStoreIdList.push(this.merchantStoreId)
    } else if (options.type == 2){
      this.merchantStoreIdList = JSON.parse(options.merchantStoreIdList);
    }
    this.findAllDeviceByMerchantStoreIdArray();
  },
  onUnload(){
    uni.hideLoading();
  },
  onPullDownRefresh() {
    this.checkedAll = false;
    this.findAllDeviceByMerchantStoreIdArray();
  },
  methods: {
    topDemoShowPopupClose(){
      this.topDemoShowPopup = false;
    },

    fullScreenDemoShowPopupClose(){
      this.fullScreenDemoShowPopup = false;
    },
    setUpYourAd(){
      this.checkDeviceId = null
      this.checkDeviceNo = null;
      this.deviceIdList = [];
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      this.findAllDeviceByMerchantStoreIdArray();
      this.deviceListShow = false
    },
    save() {
      let param = {
        topBannerFileNameList: this.topBannerFileList,
        fullScreenBannerFileList: this.fullScreenBannerFileList,
        vendingMachineMerchandiseFileList: this.vendingMachineMerchandiseFileList,
        vendingMachineFrontPageFileList: this.vendingMachineFrontPageFileList,
        vendingMachineTopCarouselFileList: this.vendingMachineTopCarouselFileList,
        deviceId: this.checkDeviceId,
        merchantStoreIdList: this.merchantStoreIdList,
      }

      if (this.topBannerFileList.length === 0 && this.fullScreenBannerFileList.length === 0
          && this.vendingMachineMerchandiseFileList.length === 0
          && this.vendingMachineFrontPageFileList.length === 0
          && this.vendingMachineTopCarouselFileList.length === 0) {
        this.findSendAgreement(param, false);
        return
      }
      if (this.merchantStoreIdList.length == 0) {
        getApp().err('场地集合不能为空');
        return
      }
      uni.showLoading({
        title: '保存中',
        mask: true
      })
      this.$api('merchantBanner.save', param).then(res => {
        if (res.status == 0) {
          console.log('this.type',this.type)
          if(this.type == 2){
            this.$helpers.toast('保存更新成功', 'success', 3000, true, () => {
              uni.navigateBack({
                delta: 1
              })
            })
          }else{
            this.findSendAgreement(param, true);
          }
        } else {
          uni.hideLoading()
          this.$helpers.toast('请求数据不成功:' + res.msg);
        }
      }).catch(err => {
        uni.hideLoading();
      })
    },

    // 防止遮罩层滚动穿透
    moveHandle(){},
    findSendAgreement(param, status) {
      this.$api('merchantBanner.findSendAgreement', param).then(res => {
        if (res.status == 0) {
          this.$helpers.toast('保存更新成功', 'success', 3000, true, () => {
            this.findAllMerchantBannerByMerchantStoreId();
          })
        } else {
          uni.hideLoading()
          this.$helpers.toast('请求数据不成功:' + res.msg);
        }
      }).catch(err => {
        uni.hideLoading();
      })
    },

    // 检查结果并返回失败、未回复的。可以让其继续同步
    checkSysnResult(){
      var list = [];
      this.smartMarketingCoinChangerDeviceList.forEach(item => {
        if (item.code != '10000'){
          list.push(item)
        }
      })
      //不显示确认按钮
      if (list.length == 0){
        this.showConfirmButton = false
      }
      return list;
    },

    fullScreenBannerPreview(e) {
      // console.log(e)
    },

    bannerOversize() {
      this.$helpers.toast("图片大小超限，最大3MB");
    },

    // 新增图片
    async bannerAfterRead(event) {
      uni.showLoading({
        title: '上传中',
        mask: true
      })
      // console.log(event)
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = event.file
      let fileListLen = 0;

      if (event.name == 1) {
        fileListLen = this.topBannerFileUrlList.length
        lists.map((item) => {
          this.topBannerFileUrlList.push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })
      } else if (event.name == 2) {
        fileListLen = this.fullScreenBannerFileUrlList.length
        lists.map((item) => {
          this.fullScreenBannerFileUrlList.push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })
      }   else if (event.name == 3) {
        fileListLen = this.vendingMachineMerchandiseFileUrlList.length
        lists.map((item) => {
          this.vendingMachineMerchandiseFileUrlList.push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })
      }  else if (event.name == 4) {
        fileListLen = this.vendingMachineFrontPageFileUrlList.length
        lists.map((item) => {
          this.vendingMachineFrontPageFileUrlList.push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })
      } else if (event.name == 5) {
        fileListLen = this.vendingMachineTopCarouselFileUrlList.length
        lists.map((item) => {
          this.vendingMachineTopCarouselFileUrlList.push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })
      } else {
        uni.hideLoading();
        this.$helpers.toast("e.name有误");
        return
      }

      for (let i = 0; i < lists.length; i++) {

        if (event.name == 1) {
          const result = await this.uploadFilePromise(lists[i].url, event.index)
          // console.log(result)

          if (!this.$u.test.isEmpty(result)) {
            // console.log("头部全局广告名称：", this.$configPath.imgURL + result);
            this.topBannerFileList.push(result)
          }

          let item = this.topBannerFileUrlList[fileListLen]
          this.topBannerFileUrlList.splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: this.$configPath.imgURL + result
          }))
        } else if (event.name == 2) {
          const result = await this.uploadFilePromise(lists[i].url, event.index)
          // console.log(result)

          if (!this.$u.test.isEmpty(result)) {
            // console.log("全屏广告名称：", this.$configPath.imgURL + result);
            this.fullScreenBannerFileList.push(result)
          }

          let item = this.fullScreenBannerFileUrlList[fileListLen]
          this.fullScreenBannerFileUrlList.splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: this.$configPath.imgURL + result
          }))
        } else if (event.name == 3) {
          const result = await this.uploadFilePromise(lists[i].url, event.index)
          // console.log(result)

          if (!this.$u.test.isEmpty(result)) {
            // console.log("全屏广告名称：", this.$configPath.imgURL + result);
            this.vendingMachineMerchandiseFileList.push(result)
          }

          let item = this.vendingMachineMerchandiseFileUrlList[fileListLen]
          this.vendingMachineMerchandiseFileUrlList.splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: this.$configPath.imgURL + result
          }))
        } else if (event.name == 4) {
          const result = await this.uploadFilePromise(lists[i].url, event.index)
          // console.log(result)

          if (!this.$u.test.isEmpty(result)) {
            // console.log("全屏广告名称：", this.$configPath.imgURL + result);
            this.vendingMachineFrontPageFileList.push(result)
          }

          let item = this.vendingMachineFrontPageFileUrlList[fileListLen]
          this.vendingMachineFrontPageFileUrlList.splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: this.$configPath.imgURL + result
          }))
        } else if (event.name == 5) {
          const result = await this.uploadFilePromise(lists[i].url, event.index)
          // console.log(result)

          if (!this.$u.test.isEmpty(result)) {
            // console.log("全屏广告名称：", this.$configPath.imgURL + result);
            this.vendingMachineTopCarouselFileList.push(result)
          }

          let item = this.vendingMachineTopCarouselFileUrlList[fileListLen]
          this.vendingMachineTopCarouselFileUrlList.splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: this.$configPath.imgURL + result
          }))
        }
        fileListLen++
      }
    },
    uploadFilePromise(fileUrl, index) {
      // console.log("index1:" + index)
      return new Promise((resolve, reject) => {

        // console.log("index2:" + index)
        let a = uni.uploadFile({
          url: this.$configPath.baseURL + '/api/upload/uploadImageToFTP',
          filePath: fileUrl,
          name: 'image',
          header: {
            Authorization: 'Bearer ' + this.$store.getters.GET_VALUE("GET_TOKEN")
          },
          /* 会与全局header合并，如有同名属性，局部覆盖全局 */
          timeout: 6000,
          formData: {
            user: 'test'
          },
          success: (res) => {
            uni.hideLoading();
            let data = JSON.parse(res.data);
            if (data.status == 0) {
              setTimeout(() => {
                resolve(data.data.keyRes);
                this.$helpers.toast("上传成功");
              }, 1000)
            } else {
              // console.log("index3:" + index)
              this.topBannerFileUrlList.splice(index, 1);
              if (uni.$u.test.isEmpty(data.msg)) {
                this.$helpers.toast("图片上传失败");
              } else {
                this.$helpers.toast(data.msg);
              }
            }

            // console.log("this.topBannerFileUrlList:" + this.topBannerFileUrlList.length)
          },
          fail: (res) => {
            uni.hideLoading();
            this.topBannerFileUrlList.splice(index, 1);
            let errMsg = res.errMsg;
            if (uni.$u.test.contains(errMsg, 'timeout')) {
              errMsg = "请求超时，请重新上传";
            }
            this.$helpers.toast(errMsg);
          },
        });
      })
    },
    // 删除已上传的图片
    bannerDeletePicToFTP(e) {
      // console.log(e)
      var title = '';
      if (e.name == 1) {
        title = '确认删除兑币机头部广告吗？';
      } else if (e.name == 2) {
        title = '确认删除兑币机全屏广告吗？';
      } else if (e.name == 3) {
        title = '确认删除售货机商品广告吗？';
      } else if (e.name == 4) {
        title = '确认删除售货机用户端首页广告吗？';
      } else if (e.name == 5) {
        title = '确认删除售货机轮播图广告吗？';
      } else {
        this.$helpers.toast("e.name有误");
        return
      }

      var _that = this;
      uni.showModal({
        title: title,
        cancelText: '取消',
        confirmText: '确认',
        showCancel: true,
        success(res) {
          if (res.confirm) {
            _that.deleteMerchantBanner(e);
          } else {
            _that.$helpers.toast("取消删除");
          }
        }
      });
    },

    deleteMerchantBanner(e) {
      uni.showLoading({
        title: '正在删除',
        mask: true
      })

      let param = {
        fileName: e.file.url,
        merchantStoreId: this.merchantStoreIdList[0],
      }

      this.$api('merchantBanner.deleteMerchantBanner', param).then(res => {
        uni.hideLoading();
        if (res.status == 0) {
          if (e.name == 1) {
            this.topBannerFileList.splice(e.index, 1);
            this.topBannerFileUrlList.splice(e.index, 1);
          } else if (e.name == 2) {
            this.fullScreenBannerFileList.splice(e.index, 1);
            this.fullScreenBannerFileUrlList.splice(e.index, 1);
          }else if (e.name == 3) {
            this.vendingMachineMerchandiseFileList.splice(e.index, 1);
            this.vendingMachineMerchandiseFileUrlList.splice(e.index, 1);
          }else if (e.name == 4) {
            this.vendingMachineFrontPageFileList.splice(e.index, 1);
            this.vendingMachineFrontPageFileUrlList.splice(e.index, 1);
          }else if (e.name == 5) {
            this.vendingMachineTopCarouselFileList.splice(e.index, 1);
            this.vendingMachineTopCarouselFileUrlList.splice(e.index, 1);
          }
          var _that = this
          this.$helpers.toast('删除成功', 'success', 3000, true, function () {
            _that.findAllDeviceByMerchantStoreIdArray();
          });
        } else {
          this.$helpers.toast('删除不成功:' + res.msg, 'none', 3500);
        }
      }).catch(err => {
        uni.hideLoading();
      })
    },

    reachBottom() {
    },

    deviceListPopupClose() {
      this.deviceListShow = false;
    },

    deviceRadioChange(e, deviceNo) {
      this.checkDeviceId = e
      this.checkDeviceNo = deviceNo;
      // console.log(e)
      let isExist = false;
      for (let i = 0; i < this.deviceIdList.length; i++) {
        if (this.deviceIdList[i] == e) {
          isExist = true;
          break
        }
      }

      if (isExist) {
        this.deviceIdList.push(e)
      }
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      this.findAllMerchantBannerByMerchantStoreId();
      this.deviceListShow = false
    },

    showDeviceListClick() {
      this.deviceListShow = !this.deviceListShow;
    },
    // 查询广告列表
    findAllMerchantBannerByMerchantStoreId() {

      let param = {
        merchantStoreId: this.merchantStoreIdList[0],
        deviceId: this.checkDeviceId
      }

      this.$api('merchantBanner.findAllMerchantBannerByMerchantStoreId', param).then(res => {
        uni.hideLoading();
        uni.stopPullDownRefresh();
        if (res.status == 0) {

          this.merchantTopBannerList = res.data.merchantTopBannerList;
          this.merchantFullScreenBannerList = res.data.merchantFullScreenBannerList;
          this.merchantVendingMachineTopCarouselList = res.data.merchantVendingMachineTopCarouselList;
          this.merchantVendingMachineMerchandiseList = res.data.merchantVendingMachineMerchandiseList;
          this.merchantVendingMachineFrontPageList = res.data.merchantVendingMachineFrontPageList;

          this.topBannerFileList = [];
          this.topBannerFileUrlList = [];
          this.fullScreenBannerFileList = [];
          this.fullScreenBannerFileUrlList = [];

          this.vendingMachineMerchandiseFileList = [];
          this.vendingMachineMerchandiseFileUrlList = [];
          this.vendingMachineFrontPageFileList = [];
          this.vendingMachineFrontPageFileUrlList = [];
          this.vendingMachineTopCarouselFileList =[];
          this.vendingMachineTopCarouselFileUrlList =[];


          //兑币机
          this.merchantTopBannerList.forEach(item => {
            this.topBannerFileUrlList.push({
              status: 'success',
              message: '',
              url: this.$configPath.imgURL + item.fileName
            })
          })
          this.merchantFullScreenBannerList.forEach(item => {
            this.fullScreenBannerFileUrlList.push({
              status: 'success',
              message: '',
              url: this.$configPath.imgURL + item.fileName
            })
          })

          //售货机
          this.merchantVendingMachineTopCarouselList.forEach(item => {
            this.vendingMachineTopCarouselFileUrlList.push({
              status: 'success',
              message: '',
              url: this.$configPath.imgURL + item.fileName
            })
          })
          this.merchantVendingMachineMerchandiseList.forEach(item => {
            this.vendingMachineMerchandiseFileUrlList.push({
              status: 'success',
              message: '',
              url: this.$configPath.imgURL + item.fileName
            })
          })
          this.merchantVendingMachineFrontPageList.forEach(item => {
            this.vendingMachineFrontPageFileUrlList.push({
              status: 'success',
              message: '',
              url: this.$configPath.imgURL + item.fileName
            })
          })
        } else {
          this.$helpers.toast('请求数据失败:' + res.msg);
        }
      }).catch(err => {
        uni.hideLoading();
        uni.stopPullDownRefresh();
      })
    },
    // 查询广告设备
    findAllDeviceByMerchantStoreIdArray() {
      uni.showLoading({
        title: '加载中',
        mask: true
      })

      let param = {
        merchantStoreIdList: this.merchantStoreIdList
      }

      this.$api('device.findAllDeviceByMerchantStoreIdArray', param).then(res => {
        if (res.status == 0) {
          this.deviceList = [];
          this.whetherToDisplayVendingMachine = res.data.whetherToDisplayVendingMachine;
          this.exhibitCurrencyExchangeMachine = res.data.exhibitCurrencyExchangeMachine;
          for (let i = 0; i < res.data.deviceVo.length; i++) {
            res.data.deviceVo[i]['checked'] = false;
            this.deviceList.push(res.data.deviceVo[i])
          }
          if (this.merchantStoreIdList.length == 1) {
            this.findAllMerchantBannerByMerchantStoreId();
          } else {
            uni.hideLoading();
            uni.stopPullDownRefresh();
          }
        } else {
          uni.hideLoading()
          uni.stopPullDownRefresh();
          this.$helpers.toast('请求数据失败:' + res.msg);
        }
      }).catch(err => {
        uni.hideLoading();
        uni.stopPullDownRefresh();
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.main{
  .set-up-ad-box{
    padding: 10rpx 0;
    background-color: #fff;
  }
  .bottom-box{
    z-index:99 !important;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .device-item-checkAll{
    background-color: #fff;
    height: 106rpx;
  }

  .device-list-title{
    height: 106rpx;
    background-color: #fff;
  }

  .ad-level {
    background-color: #fff;

    .ad-level-title{
      .title-icon{
        width: 16rpx;
        height: 16rpx;
        background-color: rgb(69, 111, 255);
        border-radius: 50%;
      }

      .title{
        color: rgb(0, 0, 0);
      }

      .title-tips{
        color: rgba(0, 0, 0, 0.5);
      }
    }

    .ad-level-tips{
      color: rgba(0, 0, 0, 0.7);
    }


    .ad-level-list{
      .ad-level-list-item{
        width: 100%;
        height: 302rpx;
        border-radius: 20rpx;
      }
    }
  }

  .device-list{
    .device-item{
      background-color: #fff;
      height: 122rpx;

      .device-item-r{
        .device-item-r-t{
          color: rgba(0, 0, 0, 0.5);
        }
      }
    }
  }
}

.sync-list{
  width: 100%;
  margin-top: 30rpx;

  .sync-list-item{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin: 20rpx 0;
  }
}

/deep/ .u-safe-area-inset-bottom {
  padding-bottom: inherit !important;
}

/deep/ .u-popup__content {
  background-color: #f6f6f6 !important;
}

/deep/ .u-upload__wrap__preview {
  width: 276rpx !important;
  height: 302rpx !important;
  margin: 0 16rpx 16rpx 0 !important;
}

/deep/ .u-upload__wrap {
  background-color: #fff !important;
}

/deep/ .u-upload__wrap__preview{
  margin-left: 44rpx !important;
}
/deep/ .u-tabbar__content{
  z-index:5 !important;
}
</style>
